<template>
  <div class="Center-all">
    <meta name="referrer" content="no-referrer" />
    <div class="Center-header">
      <div class="Center-logo">
        <img src="@/assets/logo.png" alt="" style="width: 90px; margin-left: 40px;">
        <br>
  <span style="font-size: 24px; color: #66CDAA ; margin-left: 60px;">赣选</span>
      </div>
      <div class="Center-search" style="line-height: 150px; margin-left: 200px;">
        <el-input  placeholder="赣南脐橙"  style="width: 400px; border: 3px solid #66cdaa; border-radius: 7px; margin-left: 100px;"> </el-input>
        <el-button  style="background-color: #66cdaa; color: white; ">搜索</el-button>
      </div>
      <div class="Center" style=" margin-top: 40px; margin-left: 200px;">
        <!-- <el-avatar
        src="../assets/titileleft.png"
      /> -->
      <img src="../assets/默认头像.png" alt="" style="width: 40px;">
      <br>
      <span style="margin-left: 5px">{{ user.userInfo.userinformation.nickName}}</span>
      </div>

    </div>
    <div class="Center-order" >
      <div style="height: 40px; background-color: white; line-height: 40px;"> 
        <span >我的订单</span>
        <a style="float: right;" @click="$router.push('/Order')">查看详情></a>
      </div>
     <div style="margin-top: 30px">  <span style="margin-left: 250px;" >订单详情</span>
        <span style="margin-left: 270px;">状态</span>
        <span style="margin-left: 200px;">金额</span>
        <span style="margin-left: 220px;">操作</span>
        </div>
      <div class="Center-order-item"  v-for="(item,index3) in information1" v-show="index3<3" :key="index3">
        <router-link  :to="'/Item/'+item.id" ><img :src="item.photo" width="150px" height="200px" style="float: left;" ></router-link>
        <div class="order-miaoshu" style="width: 350px;height: 200px;"><p style="">{{item.name }}</p>
  <p>{{ item.introduction }}</p></div>
  <div style="width: 200px;height: 200px;"> <p style="margin-top: 70px;">待付款</p><p>查看物流</p></div>
<div style="width: 250px;height: 200px; line-height: 200px;">¥{{ item.price }}</div>
<div style="width:250px; height: 200px;" >
<div style=""><el-button style="margin-top: 50px; background-color: #66cdaa; color: white;" >立即付款</el-button>

<p>查看详情</p>
<p>取消订单</p>
</div>
</div>
      </div>
    </div>
    <div class="Center-shoucang">
      <div style="height: 40px; line-height: 40px; background-color: white; "><span style="">我的收藏</span>
         <a style="float: right;">查看全部></a></div>
      <div class="Center-shoucang-item" v-for="(item,index) in information2" :key="index">
       <router-link :to="'/Item/'+item.id">   <div> <img :src="item.photo" alt="" width="250" height="250"></div></router-link>
       <div>{{item.name }}</div>
       <!-- <div>{{item.introduction }}</div> -->
       <div>¥{{item.price }}</div>
      </div>
      
    </div>
    
  </div>
</template>

<script>
// import router from '@/router';
import axios from '@/utils/request';
import {useUserStore} from '@/stores/user'
export default {
name:'MyCenter',
data() {
  return {
  information:[
  {img:require('../assets/2.jpg'),
   miaoshu:'陕西红富士',
   jiage:'￥18.00',
},
{img:require('../assets/2.jpg'),
   miaoshu:'波罗蜜',
   jiage:'￥28.00',
},
],
information1:[],
information2:[],
user:useUserStore()

}},
methods:{
  //前端测试
//   getdingdan(){
// axios.get('/Order').then(res=>{
//   this.information1=res[0].data
//   console.log(res[0].data);
// })
//   },
getdingdan(){
  axios.post('/personal/selorders',JSON.stringify(this.user.userInfo.userinformation.id)).then(res=>{
    console.log(res);
    if(res.code===200)
   this.information1=res.data
})
},
//前端测试获取收藏
//   getshoucang(){
//     axios.get('/message').then(res=>{
//   this.information2=res[0].data
//   console.log(res[0].data);
// })
getshoucang(){
  axios.post('/personal/selcollection',JSON.stringify(this.user.userInfo.userinformation.id)).then(res=>{
    console.log(res);
    if(res.code===200)
      {this.information2=res.data}
  })
},
},
mounted(){
  this.getdingdan()
  this.getshoucang()
}}
</script>

<style>

.Center-all{
  margin: 0 auto;
  width: 1200px;
  /* background-color: pink; */
  /* text-align: center; */
}
.Center-header{
  height: 150px;
  display: flex;
  /* line-height: 150px; */
  background-color: white;
  border: 3px solid #66cdaa;
  border-radius: 5px;
}
.Center-logo{
  margin-top: 10px;
  width: 150px;
  height: 150px;
  /* background: palegoldenrod; */
}
.Center-order{
  margin-top: 20px;
 
}
.Center-order-item{
  border: 3px solid #66cdaa;
  border-radius: 5px;
  display: flex;
  margin-top: 10px;
  width: 1200px;
  /* background-color: seagreen; */
  height: 200px;
  text-align: center;
 /* line-height: 200px;  */
 align-content: flex-start;

}
/* .Center-order-item div{ */
  /* display: inline-block; */
/* } */
.Center-shoucang{
  margin-top: 20px;
}
.Center-shoucang-item{
  /* float: left; */

  vertical-align: top;
  width: 250px;
  height: 300px;
  /* background-color: sienna; */
 display: inline-block;
 margin-left: 20px;
 margin-right: 20px;
 margin-top: 30px;
 text-align: center;
 color: #66cdaa;
 border-radius: 10px;
 border: 3px solid #66cdaa;
}
</style>